<template>
  <div>
    <a-row style="display:flex;height: 100%;width: 100%;overflow:hidden;">
      <a-col class="left">
        <div class="leftShow aidCenter">
          <div class="aidCenterPic">
            <img src="../../../static/images/aid.png">{{belongDpname}}
          </div>
          <span>
            <em class="bdCode">{{bedCode}}</em>床
          </span>
        </div>
        <div class="leftShow currentDate">
          <div class="detailList">
            <img src="../../../static/images/ReportList_Icon.png">清单列表
          </div>
          <div class="listShow">
            <ul v-for="(dlt,index) in detailList"
                :key="index">
              <li key="index"
                  @click="filterInfos(dlt)"
                  :class="{active:dlt.isActive,initIndex:index==0&&isIndexActive}">{{dlt.time_stamp}}</li>
            </ul>
          </div>
        </div>
      </a-col>
      <a-col class="right">
        <div class="rightShow">
          <div class="totalCount"><img src="../../../static/images/tips.png" />总计：{{totalCount}}元</div>
          <div style="padding:0.2rem 0 0.2rem 0">
            <img src="../../../static/images/titleSign.png">
            <span class="titleSign"
                  style="padding-left:0.16rem;color:#1a1a1a;">{{selectDate}}</span>
          </div>
          <div class="titleContent">
            <div class="datatips">此数据仅供参考，具体金额以出院结算处为准</div>
            <v-Table :datasource="dailyList"></v-Table>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Table from './Table'
// import func from '../../../vue-temp/vue-editor-bridge';
import urls from '../../common.js'
import { mapState } from 'vuex'
export default {
  name: 'DailyList',
  data () {
    return {
      bedCode: '',
      dailyList: [],
      detailList: [],
      isIndexActive: true,
      selectDate: '',
      totalCount: 0
    }
  },
  methods: {
    callback (key) { },
    initData: function () {
      var that = this
      if (this.bedNo) {
        this.$http.get(urls.painbilldetailTime + '/' + this.bedNo).then(result => {
          console.log(result)
          let res = result.body.data
          if (result.body.code === '200') {
            if (res.list.length > 0) {
              for (let i = 0; i < res.list.length; i++) {
                res.list[i].key = Math.random()
              }
              console.log(result)
              that.detailList = res.list
              that.bedCode = res.bed_no
              that.selectDate = res.list[0].time_stamp
              that.$http
                .get(
                  urls.painbilldetailInfo +
                  '/' + that.bedNo +
                  '/' +
                  res.list[0].time_stamp
                )
                .then(res2 => {
                  let datas = res2.body.data.list
                  if (res2.body.code === '200') {
                    if (datas.length > 0) {
                      for (let i = 0; i < datas.length; i++) {
                        datas[i].key = Math.random()
                      }
                    }
                    that.dailyList = datas
                    that.totalCount = res2.body.data.totalAmount
                  }
                })
            } else {
              that.bedCode = res.bed_no
            }
          }
        })
      }
    },
    filterInfos: function (val) {
      var that = this
      this.isIndexActive = false
      that.selectDate = val.time_stamp
      if (this.bedNo) {
        this.$http
          .get(urls.painbilldetailInfo + '/' + this.bedNo + '/' + val.time_stamp)
          .then(result => {
            let res = result.body.data.list
            if (result.body.code === '200') {
              if (res.length > 0) {
                for (let i = 0; i < res.length; i++) {
                  res[i].key = Math.random()
                }
              }
              that.dailyList = res
              that.totalCount = result.body.data.totalAmount
            }
          })
      } else {
        that.dailyList = []
      }
      this.detailList.forEach(function (obj) {
        obj.isActive = false
      })
      val.isActive = !val.isActive
    }
  },
  components: {
    'v-Table': Table
  },
  created () {
    console.log(333)
    this.initData()
  },
  computed: {
    ...mapState({
      bedNo: 'bedNo',
      belongDpname: 'belongDpname'
    })
  }
}
</script>

<style lang="stylus" scoped>
.titleContent {
  overflow: hidden;
}

.left {
  // position: initial;
}

.right {
  // position: absolute;
  // height: 100%;
  padding-left: 0.2rem;
  background: #fff;
  background-clip: content-box;
  flex: 1;
  overflow: hidden;
}

.leftShow {
  height: 4.2rem;
}

.aidCenter {
  background: url('../../../static/images/aidbg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  width: 4.92rem;
}

.aidCenter span {
  display: inherit;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 0.6rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.aidCenter .bdCode {
  font-size: 1.3rem;
}

.aidCenter .bdNum {
  font-size: 1.5rem;
}

.rightShow {
  padding: 0 0.22rem;
  height: 100%;
  overflow: hidden;

  .totalCount {
    background: #d8f0ed;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
    color: #27ae9e;
    margin-top: 0.2rem;
    border-radius: 0.1rem;

    img {
      height: 0.22rem;
      width: 0.22rem;
      margin-left: 0.24rem;
      margin-right: 0.1rem;
      vertical-align: sub;
    }
  }
}

.titleSign {
  // padding: 0.34rem 0 0.54rem 0.16rem;
  // font-size: 0.28rem;
  // color: #1a1a1a;
  // display: inline-block;
}

.currentDate {
  background: #fff;
  margin-top: 0.1rem;
  border-radius: 0.12rem;
  width: 4.92rem;
  overflow: hidden;
}

.detailList {
  font-size: 0.3rem;
  padding: 0.3rem 0 0.36rem 0;
  margin-left: 0.32rem;
  color: #1a1a1a;
}

.listShow {
  margin-left: 0.32rem;
  font-size: 0.32rem;
  color: #aaaaaa;
  height: 340px;
  overflow-y: auto;
}

.listShow li {
  list-style: disc;
  list-style-position: inside;
  line-height: 3;
}

.aidCenterPic {
  font-size: 0.3rem;
  color: #fff;
  background-position: 0 0.34rem;
  margin-left: 0.32rem;
  padding-top: 0.3rem;
}

.aidCenterPic img {
  width: 0.38rem;
  height: 0.34rem;
  vertical-align: sub;
  margin-right: 0.2rem;
}

.rightShow img {
  width: 0.04rem;
  height: 0.26rem;
  vertical-align: -0.03rem;
}

.detailList img {
  width: 0.32rem;
  height: 0.36rem;
  vertical-align: sub;
  margin-right: 0.2rem;
}

.active, .initIndex {
  color: #27ae9e;
}

.datatips {
  text-align: right;
  color: #000;
  font-weight: 600;
  line-height: 50px;
}
</style>
